<template>
  <div>
    <el-row :gutter="10" style="margin-top: 20px">
      <el-form ref="formRef" label-width="180px" style="display: flex">
        <el-form-item label="员工名字:">
          <el-input v-model="formRef.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="员工手机号:">
          <el-input v-model="formRef.mobile" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnSearch">搜索</el-button>
        </el-form-item>
        <el-form-item label="">
          <template>
            <el-button type="primary" @click="btnAdd">新增</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="10">
      <el-table
        :data="formattedDates"
        style="width: 100%"
        stripe
        :header-cell-style="{
          background: '#eef1f6',
          color: '#606266',
          textAlign: 'center',
        }"
        border
      >
        <el-table-column prop="id" label="用户名" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="员工名字"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template v-slot="{ row }">
            {{ row.status === 1 ? "在职" : "离职" }}
            <el-popconfirm
              title="确定要修改状态吗？"
              @onConfirm="btnChange(row)"
            >
              <el-button
                slot="reference"
                class="btnStatus"
                type="primary"
                style="width: 100px"
                >修改状态</el-button
              >
            </el-popconfirm>
            <!-- <el-switch
              active-color="#ff4949"
              inactive-color="#13ce66"
              @change="btnChange(row)"
              v-model="row.status"
            >
            </el-switch> -->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div style="text-align: center">
              <el-popconfirm title="确认要删除吗？" @onConfirm="btnDelete(row)">
                <el-button slot="reference" style="color: red">删除</el-button>
              </el-popconfirm>
              <a
                href="#"
                class="details"
                style="color: blue; margin-right: 20px"
                @click="btnEdit(row)"
                >编辑</a
              >
              <a
                href="#"
                class="details"
                style="color: blue"
                @click="$router.push(`/employee/detail/${row.id}`)"
                >详情</a
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页组件 -->
    <el-row type="flex" justify="center">
      <el-pagination
        :page-size="pageParams.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        :total="total"
        :current-page="pageParams.page"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="changePage"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-row>
    <!-- 新增弹层 -->
    <add-employee
      ref="addEmPloyee"
      :addDialogVisible.sync="addDialogVisible"
      @employeeList="employeeList"
    >
    </add-employee>
    <!-- 编辑弹层 -->
    <edit-employee
      ref="editEmPloyee"
      :editDialogVisible.sync="editDialogVisible"
      :id.sync="id"
    >
    </edit-employee>
  </div>
</template>

<script>
import AddEmployee from "@/views/employee/components/add-employee.vue";
import EditEmployee from "@/views/employee/components/edit-employee.vue";
import {
  employeeListApi,
  removeEmployeeApi,
  employeeStatusApi,
} from "@/api/employee";
export default {
  name: "employee",
  components: { AddEmployee, EditEmployee },
  data() {
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      pageParams: {
        page: 1,
        pageSize: 10,
        name: "",
        // phone: "",
      },
      formRef: {
        name: "",
        mobile: "",
      },
      tableData: [],
      total: 0,
      id: null,
      rows: null,
    };
  },
  created() {
    this.employeeList();
  },
  computed: {
    formattedDates() {
      // 格式化日期
      return this.tableData.map((item) => ({
        ...item,
        createTime: this.formatSeconds(item.createTime),
      }));
    },
  },
  methods: {
    // 封装一个转化时间的函数
    formatSeconds(seconds) {
      // 将秒数转化为日期格式
      const date = new Date(seconds);
      return date.toLocaleString();
    },
    // 列表渲染
    async employeeList() {
      const res = await employeeListApi(this.pageParams);
      // console.log(res);
      this.tableData = res.records;
      this.total = res.total;
    },

    // 新增
    btnAdd() {
      this.addDialogVisible = true;
    },

    // 点击了分页组件的页码的时候
    changePage(page) {
      this.pageParams.page = page;
      // 重新获取列表数据
      this.employeeList();
    },

    // 每页显示的条数发生改变
    handleSizeChange(val) {
      this.pageParams.pageSize = val;
      // 重新获取列表数据
      this.employeeList();
    },

    // 修改员工信息
    btnEdit(row) {
      this.editDialogVisible = true;
      console.log(row);
      this.id = row.id;
      console.log(this.$refs.editEmPloyee.formData);
      this.$refs.editEmPloyee.formData = {
        ...row,
      };
    },

    // 删除员工
    async btnDelete(row) {
      const res = await removeEmployeeApi(row.id);
      // console.log(row);
      // console.log(res);
      if (res.code === 1) {
        this.$message.success("删除成功");
        // 重新获取数据
        this.employeeList();
        // 如果当前页面只有一条数据了，页码自减之后在去请求接口，不能是第一页，第一页的页码已经是1了
        if (this.formattedDates.length === 1 && this.pageParams.page !== 1) {
          this.pageParams.page--;
          // 删除成功之后，进行提示
          this.$message.success("删除成功");
          // 重新获取数据
          this.employeeList();
        }
      }
    },

    // 修改状态
    async btnChange(row) {
      const res = await employeeStatusApi(row.id);
      console.log(res);
      if (res.code === 1) {
        // 改变它的状态
        row.status = row.status === 1 ? 0 : 1;
        this.$message.success("状态修改成功");
      }
      this.employeeList();
    },
    // 搜索
    btnSearch() {
      if (!this.formRef.name) return this.$message.warning("请输入员工名字");
      this.tableData = this.tableData.filter((item) => {
        return item.name === this.formRef.name;
      });
      this.tableData = this.tableData.filter((item) => {
        return item.mobile === this.formRef.mobile;
      });
      this.formRef.name = "";
      this.formRef.mobile = "";
    },
  },
};
</script>

<style scoped>
.btnStatus {
  border-radius: 50%;
}
</style>
